<template>
  <div class="evaluate">
    <!-- 顶部评分盒子 -->
    <div class="score">
      <div class="left">
        <p class="number">
          3.9
        </p>
        <p class="synthesize">
          综合评分
        </p>
        <p class="higher">
          高于周边商家69.2%
        </p>
      </div>

      <div class="right">
        <ul class="num1">
          <li>
            <span>服务态度&emsp;</span>
            <div class="stars1">
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_off@2x.png" alt="" />
            </div>
            <span style="color:#ff9900;">&emsp;3.9</span>
          </li>
          <li>
            <span>服务态度&emsp;</span>
            <div class="stars1">
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_on@2x.png" alt="" />
              <img src="/img/star24_off@2x.png" alt="" />
            </div>
            <span style="color:#ff9900;">&emsp;4.0</span>
          </li>
          <li style="justify-content:flex-start">
            <span>送达时间&emsp;</span>
            <span style="color:rgb(147,153,159)">44分钟</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 下方主体盒子 -->
    <div class="mainevaluate">
      <!-- 评价分类选项 -->
      <ul class="choices">
        <li>全部&nbsp;<span>57</span></li>
        <li>满意&nbsp;<span>47</span></li>
        <li>不满意&nbsp;<span>10</span></li>
      </ul>

      <!-- 评价内容 -->
      <div class="only">
        <span class="successicon">
          <van-icon name="success" />
        </span>
        &emsp;
        <span style="color:#999">只看有内容的评价</span>
      </div>

      <!-- 评价列表 -->
      <div class="evalist">
        <ul>
          <li v-for="(item, key) in evalist" :key="key">
            <div class="headinfo">
              <!-- {{ evalist }} -->
              <img
                class="avatar"
                style="width:20px;height:20px"
                src="item.avatar"
                alt=""
              />
              <span class="name">{{ item.username }}</span>
              <p class="deliverytime">
                <span>{{ item.deliveryTime }}</span>
                分钟送达
              </p>
            </div>
            <div class="text">
              <p>{{ item.text }}</p>
              <p>
                <span>
                  {{ item.recommend }}
                </span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "evaluate",
  data() {
    return {
      evalist: []
      // avatar: []
    };
  },
  mounted() {
    this.$axios.get("/api/data.json").then(res => {
      console.log(res);
      this.evalist = res.data.ratings;
      // this.avatar = res.data.ratings.avatar;
    });
  }
};
</script>

<style lang="scss" scoped>
.evaluate {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .score {
    width: 100%;
    height: 128px;
    border-top: 1px solid #eee;
    border-bottom: 20px solid #eee;
    align-items: center;
    display: flex;
    .left {
      width: 35%;
      border-right: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .number {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #ff9900;
      }
      .synthesize {
        font-size: 16px;
        margin: 5px 0;
      }
      .higher {
        font-size: 12px;
        color: rgba(7, 17, 27, 0.5);
      }
    }
    .right {
      width: 65%;
      display: flex;
      .num1 {
        display: flex;
        margin-left: 10px;
        flex-wrap: wrap;
        & > li {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin: 3px 0;
        }
      }
    }
  }
  .mainevaluate {
    width: 100%;
    .choices {
      margin: 20px;
      // width: 100%;
      display: flex;
      cursor: pointer;
      & > li {
        display: flex;
        margin-right: 5px;
        padding: 15px;
        align-items: center;
      }
      & > li:nth-of-type(1) {
        background: rgb(69, 159, 233);
        color: #fff;
      }
      & > li:nth-of-type(2) {
        background: rgb(201, 233, 255);
      }
      & > li:nth-of-type(3) {
        background: rgb(214, 214, 214);
      }
    }
    .only {
      width: 100%;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      margin: 10px 0;
      padding: 10px 20px;
      .successicon {
        border-radius: 50%;
        background: #ccc;
        color: #fff;
        padding: 3px;
        font-size: 18px;
        text-align: center;
        line-height: 20px;
      }
    }

    .evalist {
      display: flex;
      .avatar {
        width: 36px;
        height: 36px;
        margin: 14px;
      }
      .name {
        font-size: 14px;
        line-height: 14px;
      }
      .deliverytime {
        font-size: 12px;
        color: rgb(147, 153, 159);
        margin-left: 42px;
        margin-top: 10px;
      }
      .text {
        font-size: 16px;
        font-weight: bold;
        margin: 10px 42px;
        line-height: 24px;
      }
    }
  }
}
</style>